<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="register">
    <h3>欢迎您注册网上银行</h3>
<from>
  <input type="text" id="phone" name="phone" placeholder="请输入手机号"><br>
  <input type="password" id="password1" name="password1" placeholder="请设置密码"><br>

  <input type="password" id="password2" name="password2" placeholder="再次输入密码"><br>

    <div class="user-phone">
        <div id="box1">
            <label for="imageCode"><i class="am-icon-check am-icon-sm"></i></label>
            <!--这里v-model="phoneUserForm.imageCode" 双向绑定 用户根据图形验证码输入的验证码   style="width: 180px;"设置文本的输入长度  -->
            <input type="text" name="" style="width: 140px;" v-model="phoneUserForm.base64ImageCode"
                   id="imageCode" placeholder="请输入验证码">
        </div>
        <div>
            <canvas id="canvas" width="150px" height="50px"></canvas>
        </div>
        <div id="box2">
            <input type="button" id="submit" name="submit" value="注册">
        </div>
    </div>

</from>
</div>
</body>
<style>
    .user-phone{
        margin: 0 auto;
        width: 500px;
        height: 100%;
    }
    .user-phone div{

        float: left;
    }
    #box2{
      margin-left: 100px;
    }
    #box1{
        margin-top: -7px;
        margin-left: 100px;
    }
  body{
    text-align: center;
    font: 1.3em sans-serif;
  }
  h3{
    font: 1.5em sans-serif;
    letter-spacing: 5px;
  }
  #code,#btn,#submit{
    border-radius: 30px;
  }
  input,#btn{
    width: 300px;
    height: 40px;
    margin-top: 10px;
    box-shadow: 0 0 10px #fff;
  }
  #btn,#code{
    width: 140px;
    height: 40px;
    margin-top: 30px;
  }
  #submit{
    width: 300px;
    height: 50px;
    font: 1.4em sans-serif;
    margin-top: 35px;
    margin-left: 5px;
    line-height: 50px;
  }
</style>

<script>

    let a = drawPic()
    //获取用户填充的数据
    $("#submit").click(function () {
        let phone = $("#phone").val();
        let password1 = $("#password1").val();
        let password2 = $("#password2").val();
        let code = $("#imageCode").val();
        let url = "/airong/user?action=findOneByUser"
        let params = {phone, password1, password2}
        $.post(url, params, function (data) {
            if (data === "\"falsePhone\"") {
                alert("号码错误")
            } else if (data === "\"falsePassword\"") {
                alert("两次密码不一致")
            } else if (code != a){
                alert("验证码错误")
            }else {
                confirm("是否前往登录")
                location.href = "login.html"
            }
        }, "text");
    })
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    //生成随机颜色RGB分量
    function randomColor(min, max) {
        var _r = randomNum(min, max);
        var _g = randomNum(min, max);
        var _b = randomNum(min, max);
        return "rgb(" + _r + "," + _g + "," + _b + ")";
    }

    //先阻止画布默认点击发生的行为再执行drawPic()方法
    document.getElementById("canvas").onclick = function (e) {
        e.preventDefault();
        drawPic();
    };

    function drawPic() {
        //获取到元素canvas
        var $canvas = document.getElementById("canvas");
        var _str = "0123456789";//设置随机数库
        var _picTxt = "";//随机数
        var _num = 4;//4个随机数字
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");//获取 context 对象
        ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
        ctx.fillStyle = randomColor(180, 240);//填充画布颜色
        ctx.fillRect(0, 0, _width, _height);//填充矩形--画画
        for (var i = 0; i < _num; i++) {
            var x = (_width - 10) / _num * i + 10;
            var y = randomNum(_height / 2, _height);
            var deg = randomNum(-45, 45);
            var txt = _str[randomNum(0, _str.length)];
            _picTxt += txt;//获取一个随机数
            ctx.fillStyle = randomColor(10, 100);//填充随机颜色
            ctx.font = randomNum(16, 40) + "px SimHei";//设置随机数大小，字体为SimHei
            ctx.translate(x, y);//将当前xy坐标作为原始坐标
            ctx.rotate(deg * Math.PI / 180);//旋转随机角度
            ctx.fillText(txt, 0, 0);//绘制填色的文本
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        for (var i = 0; i < _num; i++) {
            //定义笔触颜色
            ctx.strokeStyle = randomColor(90, 180);
            ctx.beginPath();
            //随机划线--4条路径
            ctx.moveTo(randomNum(0, _width), randomNum(0, _height));
            ctx.lineTo(randomNum(0, _width), randomNum(0, _height));
            ctx.stroke();
        }
        for (var i = 0; i < _num * 10; i++) {
            ctx.fillStyle = randomColor(0, 255);
            ctx.beginPath();
            //随机画原，填充颜色
            ctx.arc(randomNum(0, _width), randomNum(0, _height), 1, 0, 2 * Math.PI);
            ctx.fill();
        }
        return _picTxt;}
    //返回随机数



    // $.post(url,params,function(data){
    //
    //
    // },"text");






</script>
</html>